<template>
	<div class="container" @click="onTap">
		<div class="head">
			<vTag :text="typeText" class="tag"></vTag>	
			<vLike class="like" :read-only="true" :like="true" :count="classic.fav_nums"></vLike>
		</div>
		<img :src="classic.image" :class="classic.type==200?'music-img':'other-img'" alt="">
		<div class="text">{{classic.content}}</div>
	</div>
</template>
<script>
import vTag from '../../components/tag/tag.vue'
import vLike from '../../components/like/like.vue'
export default{
	name:'vPreview',
	data(){
		return{
			typeText:'',
		}
	},
	props:{
		classic:Object
	},
	components:{
		vTag,vLike
	},
	created(){
		let tt={
			100:'电影',
			200:'音乐',
			300:'句子'
		}
		let textType=tt[this.classic.type]
		this.typeText=textType
	},
	methods:{
		onTap(){

		}
	},
	watch:{
		
	}
}
</script>
<style lang="stylus" scoped>
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width:176px;
  background-color: #ffffff;margin-bottom:15px;
}

.head{
  display: flex;
  width:100%;
  flex-direction: row;
  align-items: center; 
  justify-content: space-between;
  height:40px;
}

.tag{
  margin-left:10px;
  margin-top:-1px;
  height:20px;  
  width:36px ;
  font-size:12px;
  background-color:#f7f7f7 !important;
}

.like{
  margin-top:2px;
  margin-right:2px;
}

.other-img{
  width:100%;
  height:120px;
}

.music-img{
  border-radius: 50%;
  width:120px;
  height:120px;
}

.text{
  padding:15px;
  font-size:14px;
  height:66px;
  color:#666666;
  overflow: hidden;
}	
</style>